<template>
    <div :style="{ height: '100%', width: '100%' }" />
</template>

<script>
import echarts, { themeList } from "./theme";
import resize from "./mixins/resize";
import { DEFAULT_THEME } from "./setting";
import china from "echarts/map/json/china.json";
const defaultTheme = DEFAULT_THEME || null;
export default {
    name: "ChinaCharts",
    mixins: [resize],
    props: {
        baseChartsData: {
            type: Object,
            required: true
        },
        theme: {
            type: String,
            required: false,
            default: undefined
        }
    },
    data() {
        return {
            chart: null,
            selfTheme: null
        };
    },
    watch: {
        baseChartsData: {
            deep: true,
            handler(val) {
                this.setOptions(val);
            }
        }
    },
    mounted() {
        this.checkTheme();
        this.initChart();
    },
    beforeDestroy() {
        if (!this.chart) return;
        this.chart.dispose();
        this.chart = null;
    },
    methods: {
        checkTheme() {
            this.selfTheme =
                this.theme && themeList.some(item => item.name === this.theme)
                    ? this.theme
                    : defaultTheme;
        },
        initChart() {
            echarts.registerMap("china", china);
            this.chart = echarts.init(this.$el, this.selfTheme);
            this.setOptions(this.baseChartsData);
            this.$nextTick(() => {
                console.log(this.chart.getOption());
            });
        },
        setOptions(value) {
            this.chart && this.chart.setOption(value, true);
        }
    }
};
</script>
